<!DOCTYPE html>
<html lang="en" data-theme="light"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>卡拉OK</title>
  <link rel="stylesheet" href="/static/css/main.css">
  <script type="text/javascript" src="/static/js/jq.min.js"></script>
</head>
<body>
<div class="l_body s:aa index tech" id="start" layout="">
  <aside class="l_left">
    <div class="leftbar-container">
      <div class="widgets">
        <div><input id="search-text" type="text" placeholder="请输入歌曲或歌手名字"><a id="search-song">搜索</a></div>
      </div>
      <div class="song-container"></div>
    </div>
  </aside>
  <div class="l_main" id="main">
    <div class="post-card post">
      <div class="title-song">
        <div class="current-song"></div>
        <div class="next-song"></div>
      </div>
      <div class="img-contain">
        <div style="width: 20%;" id="re-sing"><img style="width: 80%; height: 80%;" src="/static/img/re-sing.svg" alt="re-sing.svg"><p>重唱</p></div>
        <div style="width: 50%;">
          <img style="width: 100%; height: 100%; transition: transform 0.2s;" src="/static/img/music.svg" alt="music.svg" id="main-image">
        </div>
        <div style="width: 20%;" id="next-song"><img style="width: 80%; height: 80%;" src="/static/img/next_song.svg" alt="next_song.svg"><p>切歌</p></div>
      </div>
      <div class="function-song">
        <div id="switchVocal"><img src="/static/img/yuan.svg" alt="yuan.svg"><p>原唱</p></div>
        <div id="rotate-img"><img src="/static/img/startRotate.svg" alt="rotate.svg"><p>开始</p></div>
        <div id="change-volume"><img src="/static/img/tiaoyin.svg" alt="tiaoyin.svg"><p>调音</p></div>
        <!--div><img src="/static/img/yuan.svg" alt="yuan.svg"><p>互动</p></div-->
      </div>
      <div class="volume-setting">
        <div><div>原唱音量：</div><div class="volume-box">
            <div id="volume-vocals-progress" class="mkpgb-area">
                <div class="mkpgb-bar"></div>
                <div class="mkpgb-cur" style="width: 60%;"></div>
                <div class="mkpgb-dot" style="left: 60%;"></div>
            </div>
        </div></div>
        <div><div>伴奏音量：</div><div class="volume-box">
            <div id="volume-acc-progress" class="mkpgb-area">
                <div class="mkpgb-bar"></div>
                <div class="mkpgb-cur" style="width: 60%;"></div>
                <div class="mkpgb-dot" style="left: 60%;"></div>
            </div></div>
        </div>
      </div>
      <div class="interrupt-song">
        <div id="guzhang"><img src="/static/img/guzhang.svg" alt="guzhang.svg"><p>鼓掌</p></div>
        <div id="huanhu"><img src="/static/img/huanhu.svg" alt="huanhu.svg"><p>欢呼</p></div>
        <div id="daxiao"><img src="/static/img/daxiao.svg" alt="daxiao.svg"><p>大笑</p></div>
        <div id="xixu"><img src="/static/img/xixu.svg" alt="xixu.svg"><p>唏嘘</p></div>
      </div>
      <div class="control-bar">
        <button type="button" class="mobile-only leftbar-toggle mobile" onclick="sidebar.leftbar()">
          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M800 339.2c6.4-115.2-83.2-230.4-211.2-262.4s-268.8 19.2-320 121.6c-19.2 0-38.4 19.2-44.8 38.4l-19.2 57.6c-6.4 25.6 12.8 57.6 38.4 70.4 0 0 25.6 153.6 204.8 198.4 185.6 51.2 281.6-70.4 281.6-70.4 32 6.4 64-12.8 70.4-38.4l12.8-51.2c12.8-25.6 0-51.2-12.8-64z m-76.8 89.6L288 313.6c-12.8 0-25.6-19.2-19.2-32 0-12.8 19.2-25.6 32-19.2l435.2 115.2c12.8 6.4 25.6 19.2 19.2 32 0 19.2-19.2 25.6-32 19.2zM294.4 544L256 857.6c-6.4 32 12.8 64 38.4 70.4l108.8 32c32 6.4 64-12.8 70.4-38.4l121.6-288c-160 19.2-281.6-70.4-300.8-89.6z"></path></svg>
          <p style="margin-top: 1.2rem; font-size: var(--fsh3);">点歌</p>
        </button>
        <button type="button" class="laptop-only rightbar-toggle mobile" onclick="sidebar.rightbar()">
          <p style="float: right; font-size: 1.3rem;" id="added-song-num"></p>
          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M897.682286 306.688l77.568 77.568a36.571429 36.571429 0 1 1-51.712 51.712l-15.542857-15.506286v278.198857l-0.036572 0.987429 0.146286 7.936a182.857143 182.857143 0 1 1-73.216-146.358857V332.946286a36.461714 36.461714 0 0 1 11.081143-26.258286 36.571429 36.571429 0 0 1 51.712 0zM396.105143 785.846857a36.571429 36.571429 0 1 1 0 73.142857h-292.571429a36.571429 36.571429 0 0 1 0-73.142857h292.571429z m329.142857-187.977143a109.714286 109.714286 0 1 0 0 219.428572 109.714286 109.714286 0 0 0 0-219.428572z m-256-143.725714a36.571429 36.571429 0 1 1 0 73.142857h-365.714286a36.571429 36.571429 0 0 1 0-73.142857h365.714286z m369.152-331.702857a36.571429 36.571429 0 1 1 0 73.142857h-731.428571a36.571429 36.571429 0 1 1 0-73.142857h731.428571z"></path></svg>
          <p style="margin-top: 1.2rem; font-size: var(--fsh3);">已点</p>
        </button>
      </div>
    </div>
    <div class="main-mask" onclick="sidebar.dismiss()"></div>
  </div>
  <aside class="l_right">
    <div class="leftbar-container"><div class="widgets"><div style="font-size: var(--fsh5);">已点 <span id="added-song-num1"></span> 首歌曲</div></div>
      <div class="added-container"></div>
    </div>
  </aside>
</div>
<script>
    localStorage.setItem("server", "{{ prefix }}");
</script>
<script type="text/javascript" src="/static/js/main.js"></script>
</body></html>
